<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="家政服务" title-size="36" :border-bottom="false">
          <view class="slot-wrap">
            <view style="width: 690rpx; overflow: auto">
              <view class="location dis-flex flex-y-center" @click="onCity">
                <!-- <text style="font-size: 32rpx;margin-right: 20rpx;">外卖</text> -->
                <u-icon
                  style="vertical-align: middle; margin-right: 10rpx"
                  name="/static/dw-g.png"
                  size="30rpx"
                  mode=""
                ></u-icon>
                <text class="address u-line-1">{{
                  address.name ? subCity(address.name) : '选择'
                }}</text>
                <u-icon
                  style="margin-left: 10rpx"
                  name="/static/more.png"
                  color="#333333"
                  size="20"
                ></u-icon>
              </view>
            </view>
          </view>
        </u-navbar>
        <!-- 			<view  class="searchView" @click="onSearch">
					<u-search placeholder="搜索所需商品" height="64" :show-action="true" style="width: 100%;"></u-search>
				</view> -->
      </view>

      <view class="card service">
        <scroll-view
          class="cate-left"
          :scroll-x="true"
          :show-scrollbar="false"
          :enhanced="true"
          @touchmove.stop.prevent
        >
          <view
            class="item"
            @click="routeToCate(service)"
            v-for="(service, index) in categoryList"
            :key="index"
          >
            <u-image shape="circle" :src="service.iconUrl" width="90rpx" height="90rpx"></u-image>
            <view class="name"> {{ service.name }}</view>
          </view>
        </scroll-view>
      </view>
      <view class="hot">热门服务</view>

      <view class="list">
        <view class="active-item dis-flex" v-for="(item, index) in itemList" :key="index">
          <view
            class="fanli-detail dis-flex"
            @click="routeTo('/other/merchant-center/merchant-center-service?id=')"
            style="margin-bottom: 30rpx"
          >
            <u-image
              class="goods-avarar"
              :src="`${getImageUrl('banner.png')} `"
              width="345rpx"
              height="345rpx"
            ></u-image>
            <view class="goods-con">
              <view class="tl oneline-hide-1">{{ item.title }}</view>
              <!-- <view class="type"><text style="margin-right: 10rpx;">足疗/按摩</text>  <text> ¥78/人 </text></view> -->
              <view class="sales">
                <text class="star">4.9分</text>
                <text class="pos">已预约988单</text>
              </view>
              <view class="bottom dis-flex flex-y-center flex-y-between">
                <view class="price">
                  <text style="font-size: 28rpx">¥</text>
                  <text>160.00</text>
                  <text style="font-size: 28rpx">起</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import utils from '@/common/utils'
export default {
  data() {
    return {
      show: false,
      categoryList: [],
      itemList: [
        {
          picUrl: '',
          title: '乡村儿童守护公益计划乡村儿童守护公益',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远，关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        }
      ],
      city: '',
      imgStyle: {
        width: '12rem'
      },
      address: {
        name: '',
        code: ''
      }
    }
  },
  onLoad() {
    this.address = uni.getStorageSync('address') || {}
    this.$u.get('/app-api/shop/category/list', { parentCode: 'housekeeping' }).then((res) => {
      this.categoryList = res.data
    })
    this.queryList(1)
  },
  methods: {
    subCity(city) {
      return city.length > 4 ? city.substr(0, 4) + '...' : city
    },
    onCity() {
      uni.$on('selectAddress', (res) => {
        this.address = uni.getStorageSync('address') || {}
        this.queryList(1)
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    routeToCate(item) {
      let query = utils.urlEncode(item)

      uni.navigateTo({
        url: '/lianmeng/store-list-service-cate?' + query
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },

    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u.api
        .getGoodsPage({
          pageNo,
          pageSize,
          shopCityId: this.cityCode,
          categoryId: '',
          cityCode: this.address.code
        })
        .then((res) => {
          // this.$refs.paging.complete(res.data.list)
        })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}

.address {
  font-size: 30rpx;
}

.searchView {
  padding: 13rpx 20rpx;
  background-color: #fff;
}

.card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.service {
  padding: 20rpx 0;
  // width: 100%;
  .cate-left {
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
  }
  .item {
    height: 100%;
    display: inline-block;
    margin-right: 20rpx;
    text-align: center;
    .name {
      font-size: 26rpx;
      color: #333333;
    }
  }
  .item:first-child {
    margin-left: 20rpx;
  }
}

.hot {
  font-weight: 600;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 30rpx;
  padding-top: 10rpx;
  margin-left: 20rpx;
}
.shaixuan {
  padding: 0 20rpx 20rpx 20rpx;
  .sx-item {
    // width: 130rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 10rpx;
    line-height: 60rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #333333;
  }
  .mar-20 {
    margin-right: 20rpx;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;

  .active-item:nth-child(odd) {
    margin-right: 20rpx;
  }

  .active-item {
    width: 345rpx;
    display: inline-block;
    margin-right: 0;
    height: 560rpx;
    margin-bottom: 20rpx;
    background-color: #fff;

    .fanli-detail {
      padding: 0;
      flex-flow: column;
      height: 100%;
      .goods-avarar {
        border-radius: 10rpx;
        background-color: #fff;
      }

      .goods-con {
        padding: 20rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        height: 215rpx;
        .tl {
          font-size: 28rpx;
          color: #333333;
        }

        .sales {
          padding-bottom: 10rpx;
          .star {
            font-weight: 600;
            font-size: 30rpx;
            color: #10a28f;
            margin-right: 10rpx;
          }

          .pos {
            font-size: 22rpx;
            color: #999999;
          }
        }
        .type {
          font-size: 22rpx;
          color: #999999;
        }
        .bottom {
          font-size: 24rpx;
          color: #666666;
          width: 100%;
          .price {
            font-weight: 600;
            font-size: 36rpx;
            color: #fa453c;
          }
        }
      }
    }
  }
}
</style>
